<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>本地存储</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body onload="init()">
    <!-- 1.1 web storage -->
	<!-- <div class="container">
	    <h1>Web Storage 示例</h1>
	    <p id="msg" class="lead text-info" style="min-height: 34px;"></p>
	    <input type="text" id="input" class="form-control">
	    <br>
	    <input type="button" class="btn btn-primary" value="保存数据" onclick="saveStorage('input');">
	    <input type="button" class="btn btn-info" value="读取数据" onclick="loadStorage('msg');">
	</div> -->
    <!-- 1.1 web storage  end-->

    <!-- 1.2 简单 web 留言本-->
    <!-- <div class="container" id="leaving">
        <h1>简单 web 留言板</h1>
        <textarea class="form-control" id="message" cols="30" rows="10" style="min-height: 100px;"></textarea><br>
        <button class="btn btn-info" onclick="saveStorage('message')">留言</button>
        <button class="btn bnt-primary" onclick="clearStorage()">清空留言</button>
        <p id="msg" class="lead text-info" style="min-height: 34px;"></p>
    </div> -->
    <!-- 1.2 简单 web 留言本 end-->

    <!-- 1.3 作为简易数据库来运用 -->
    <!-- <div class="container">
	    <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">使用 web storage 作为简易数据库来运用</div>
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
		           <div class="form-group">
			           	<label for="userName" class="col-sm-2 control-label">姓名：</label>
			           	<div class="col-sm-10">
			           	    <input type="text" class="form-control" placeholder="姓名" id="userName">
			           	</div>
		           </div>
		           <div class="form-group">
		               <label for="email" class="col-sm-2 control-label">Email：</label>
		               <div class="col-sm-10">
		               	<input type="email" class="form-control" id="email" placeholder="邮箱">
		               </div>
		           </div>
		           <div class="form-group">
		               <label for="tel" class="col-sm-2 control-label">电话号码：</label>
		               <div class="col-sm-10">
		                   <input type="phone" id="tel" class="form-control" placeholder="电话号码">
		               </div>
		           </div>
		           <div class="form-group">
		           	    <label for="memo" class="col-sm-2 control-label">备注：</label>
		           	    <div class="col-sm-10">
		           	        <input type="text" class="form-control" id="memo" placeholder="备注">
		           	    </div>
		           </div>
		           <div class="form-group">
		               <div class="col-sm-offset-2 col-sm-10">
		               	    <button class="btn btn-primary" onclick="saveStorage()">保存</button>
		               </div>
		           </div>
		           <div class="form-group">
		           	   <div class="col-sm-offset-2 col-sm-7">
		           	   	 <input type="text" class="form-control" id="find">
		           	   </div>
		           	   <div class="col-sm-3">
		           	   	 <button class="btn btn-primary" onclick="findStorage('msg')">搜索</button>
		           	   </div>
		           </div>
	        	</div>
            </div>
	    </div>
	    <div id="msg"></div>
    </div> -->
    <!-- 1.3 作为简易数据库来运用 end -->

    <!-- 1.4 用 storage 事件实时监控 web Storage 中的数据 -->
    <!-- <div class="container">
        <input class="form-control" type="text" id="text1">
        <br>
        <button onclick="setLocalStorage()">设置</button>
    	<output id="output"></output>值修改后显示的地方
    </div> -->
    <!-- 1.4 用 storage 事件实时监控 web Storage 中的数据  end-->

    <!-- 2.3 使用数据库实现web留言本 -->
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="pancel-title">使用数据库实现 web 留言本</div>
            </div>
           <div class="panel-body">
           	    <div class="form-horizontal">
           	        <div class="form-group">
           	           <label for="uName" class="col-sm-2 control-label">姓名：</label>
           	           <div class="col-sm-10"><input type="text" class="form-control" id="uName"></div>
           	        </div>
           	        <div class="form-group">
           	            <label for="umsg" class="col-sm-2 control-label">留言：</label>
           	            <div class="col-sm-10">
           	                <input type="text" class="form-control" id="umsg">
           	            </div>
           	        </div>
           	        <div class="col-sm-offset-2 col-sm-10">
           	            <button class="btn btn-primary" onclick="saveData()">保存</button>
           	        </div>
           	    </div>
           </div>
        </div>
        <table class="table table-bordered" id="show-msg">
        	<tr>
        		<th>姓名</th>
        		<th>留言</th>
        		<th>时间</th>
        	</tr>
        </table>
    </div>
    <!-- 2.3 使用数据库实现web留言本 end -->
    <script src="../script/storage.js"></script>
</body>
</html>